<template>
    <div class="main">
        <div class="content">
            <div class="breadcrumb">
                <div class="title">当前位置：</div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="/admin">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/personnel/list">员工</a></el-breadcrumb-item>
                    <el-breadcrumb-item>添加员工</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="cont">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="ruleForm">
                    <el-form-item label="员工姓名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="电话号码" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地区" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="状态" prop="name">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="业绩收益比例" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <div class="title">
                        账号信息           
                    </div>
                    <el-form-item label="账户名" prop="">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="账户密码" prop="">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components:{
        
    },
    data(){
        return{
            ruleForm: {
                name: '',
                logo:'',
                resource:0,
                lng:'',
                lat:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入商户名称', trigger: 'blur' }
                ],
                logo: [
                    { required: true, message: '请选上传商户logo', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                
            },
            
        }
    },
    mounted(){
        
    },
    computed:{
        
    },
    methods:{
        //
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style lang="scss" scoped>
    .main{
        display: flex;
        .content{
            padding: 20px;
            width: 100%;
            .breadcrumb{
                display: flex;
                align-items: center;
            }
            .cont{
                background-color: #ffffff;
                padding: 20px 30px;
                margin-top: 20px;
                .ruleForm{
                    width: 60%;
                    .title{
                        margin: 15px 0;
                        font-weight: 600;
                        border-left: 3px solid rgb(0, 140, 255);
                        font-size: 14px;
                        line-height: 18px;
                        padding-left: 10px;
                    }
                    .el-form-item{
                        margin-left:40px;
                        .address{
                            display: flex;
                            >div{
                                margin-right: 15px;
                               
                            }
                            button{
                                height: 40px;
                            }
                        }
                        
                    }
                }
            }
        }
    }
</style>